<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in orderMoney" :key="index">
							<div class="title">{{ item.title }}</div>
							<div class="num">￥{{ item.num }}</div>
							<div class="money-li-child base-flex">
								<div v-for="(itemC, indexC) in item.child" :key="indexC">
									<div class="title">{{ itemC.title }}</div>
									<div class="num">{{ itemC.num }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<div class="Filter">
					<el-select
						size="mini"
						filterable
						placeholder="时间筛选"
						v-model="selects.timeType"
						style="margin-right: 10px;width:100px;"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>

					<date-picker
						:date="dateArr"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>
			<template #slot-statuspicker>
				<el-select
					size="mini"
					filterable
					v-model="selects.status"
					placeholder="订单状态"
					style="margin-right: 10px;width:100px;padding-left: 10px;"
					@change="val => refresh({ orderStatus: val, page: 1 })"
				>
					<el-option label="全部订单" value></el-option>
					<el-option label="订单结算" :value="3"></el-option>
					<el-option label="订单付款" :value="12"></el-option>
					<el-option label="订单失效" :value="13"></el-option>
					<el-option label="订单成功" :value="14"></el-option>
				</el-select>

				<el-select
					size="mini"
					filterable
					v-model="selects.isFree"
					placeholder="是否免单"
					style="margin-right: 10px;width:100px;"
					@change="val => refresh({ isFree: val, page: 1 })"
				>
					<el-option label="全部" value=" "></el-option>
					<el-option label="未检测 " :value="0"></el-option>
					<el-option label="是" :value="1"></el-option>
					<el-option label="否" :value="2"></el-option>
				</el-select>
			</template>
			<template #table-column-goodInfo="{scope}">
				<goodInfo :item="scope.row"></goodInfo>
			</template>
			<template #table-column-orderCreateTime="{scope}">{{ scope.row.orderCreateTime | format_date }}</template>

			<template #table-column-status="{scope}">{{ scope.row.orderStatus | order_status }}</template>
			<template #table-column-isFree="{scope}">
				<div>
					<el-tag type="info" v-if="scope.row.isFree == 0">未检测</el-tag>
					<el-tag v-else-if="scope.row.isFree == 1" type="success">是</el-tag>
					<el-tag type="info" v-else-if="scope.row.isFree == 2">否</el-tag>
				</div>
			</template>
			<template #table-column-orderType="{scope}">
				<div>
					<el-tag type="info" v-if="scope.row.orderType == '-1'">未检测</el-tag>
					<el-tag v-if="scope.row.orderType == 0" type="info">非活动</el-tag>
					<el-tag v-if="scope.row.orderType == 1">免单</el-tag>
					<el-tag v-if="scope.row.orderType == 2" type="success">限时抢购</el-tag>
					<el-tag v-if="scope.row.orderType == 3">新人专享</el-tag>
					<el-tag v-if="scope.row.orderType == 4">百万补贴</el-tag>
				</div>
			</template>

			<template #table-column-orderCommissionTotal="{scope}">
				<div>￥ {{ scope.row.orderCommissionTotal }}</div>
			</template>

			<!-- 服务费 -->
			<template #table-column-serviceFee="{scope}">
				<div>￥{{ scope.row.orderCommissionTotal | serviceNum }}</div>
			</template>

			<!-- 淘礼金↓ -->
			<template #table-column-taoMoney="{scope}">
				<div>{{ scope.row.tljMoney || 0 }}</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker2';
import goodInfo from '../statisticalForm/components/orderList/goods-info';
import moment from 'moment';
import platform from '@/mixin/platform';
export default {
	data() {
		return {
			crud: null,
			orderMoney: [
				{
					title: '销售额',
					num: '0',
					child: [
						{
							title: '全部单数',
							num: '0'
						}
					]
				},
				{
					title: '有效佣金',
					num: '',
					child: [
						{
							title: '有效订单数',
							num: ''
						}
					]
				},
				{
					title: '免单佣金',
					num: '0',
					child: [
						{
							title: '免单单数',
							num: '0'
						}
					]
				},
				{
					title: '返利佣金',
					num: '0'
				},
				{
					title: '淘礼金金额',
					num: '0'
				},
				{
					title: '利润',
					num: '0'
				}
			],
			selects: {
				timeType: 0,
				isFree: '',
				status: '',
				source: null
			},
			dateArr: [
				moment().format('YYYY-MM-DD 00:00:00'),
				moment().format('YYYY-MM-DD 23:59:59')
			]
		};
	},
	components: {
		DatePicker,
		goodInfo
	},
	filters: {
		serviceNum(val) {
			return (val * 0.05).toFixed(2);
		}
	},
	mixins: [platform],
	activated() {
		let arr = this.$route.query.arr;
		if (arr) {
			this.dateArr = arr;
			this.crud.refresh({
				startTime: arr[0],
				endTime: arr[1]
			});
		}
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.statisticalForm.orderList)
				.set('dict', {
					label: {
						add: '添加用户'
					}
				})
				.set('dict', {
					sort: {
						prop: 'order',
						order: 'sort'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						{
							label: '用户名',
							prop: 'nickName',
							align: 'center'
						},
						{
							label: '商品信息',
							prop: 'goodInfo',
							align: 'center',
							width: '550px'
						},
						{
							label: '订单状态',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'orderCreateTime',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},

						{
							label: '有效佣金',
							prop: 'orderCommissionTotal',
							align: 'center',
							sortable: 'custom',
							formatter(row) {
								return row.orderStatus == 13 ? 0 : row.orderCommissionTotal;
							}
						},
						{
							label: '返利佣金',
							prop: 'orderCommission',
							align: 'center'
						},
						{
							label: '淘礼金',
							prop: 'tljMoney',
							align: 'center',
							formatter(row) {
								return row.orderStatus == 13 ? 0 : row.tljMoney || 0;
							}
						},
						{
							label: '利润',
							prop: 'lirun',
							align: 'center',
							formatter(row) {
								return row.orderStatus == 13
									? 0
									: (
											(row.orderCommissionTotal || 0) -
											(row.orderCommission || 0) -
											(row.tljMoney || 0)
									  ).toFixed(2);
							}
						},
						{
							label: '是否免单',
							prop: 'isFree',
							align: 'center'
						},

						{
							label: '订单编号',
							prop: 'tradeId',
							align: 'center'
						}
					],

					op: {
						visible: false
					},
					props: {
						'default-sort': {
							prop: 'orderCreateTime',
							order: 'descending'
						}
					}
				})
				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'flex1', 'search-key'],
					['slot-statuspicker', 'slot-datepicker'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					if (params.isFree === ' ') {
						delete params.isFree;
					}
					if (params.isTLJ === ' ') {
						delete params.isTLJ;
					}
					const { subData } = await next(params);
					if (subData) {
						this.orderMoney[0].num = subData.orderAmount || 0;
						this.orderMoney[0].child[0].num = subData.orderNum;
						this.orderMoney[1].num = subData.validCommissionTotal || 0;
						this.orderMoney[1].child[0].num = subData.validOrderNum;
						this.orderMoney[2].num = subData.mdCommissionTotlal || 0;
						this.orderMoney[2].child[0].num = subData.mdOrderNum;
						this.orderMoney[3].num = subData.validCommission || 0;
						this.orderMoney[4].num = subData.tljMoney|| 0;;
						this.orderMoney[5].num = (
							subData.validCommissionTotal -
							subData.validCommission -
							subData.tljMoney
						).toFixed(2);
					} else {
						this.orderMoney[0].num = 0;
						this.orderMoney[0].child[0].num = 0;
						this.orderMoney[1].num = 0;
						this.orderMoney[1].child[0].num = 0;
						this.orderMoney[2].num = 0;
						this.orderMoney[2].child[0].num = 0;
						this.orderMoney[3].num = 0;
					}
				})
				.done();

			const [startTime, endTime] = this.dateArr;

			app.refresh({
				prop: 'orderCreateTime',
				order: 'desc',
				type: 'revenue',
				startTime,
				endTime
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			position: relative;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.Filter {
	margin-right: 10px;
	.title {
		margin-right: 10px;
		font-size: $font14;
		color: #666;
	}
}
.tips {
	color: #f14d27;
}
</style>

<style lang="stylus" scoped>
// 格式化crud
.cl-crud {
  padding: 0;

  >>>.el-row.el-row--2 {
    padding: 0 10px;
  }

  >>>.crud-data-table {
    padding: 0 10px;
  }

  >>>.el-row:last-child {
    padding: 0 10px;
  }
}
</style>
